<template>
  <a-modal
    :visible="openAddEdit"
    :title="title"
    :footer="false"
    :modal-style="{ width: '600px' }"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      size="large"
      @submit="handleAddSubmit"
    >
      <a-form-item
        field="itemCode"
        label="检验项目"
        required
        label-col-flex="130px"
      >
        <a-select
          v-model="formData.itemCode"
          placeholder="请选择检验项目"
          style="width: 100%"
        >
          <a-option value="XM001">XM001-血常规</a-option>
          <a-option value="XM002">XM002-肝功能</a-option>
          <a-option value="XM003">XM003-肾功能</a-option>
          <a-option value="XM004">XM004-血脂</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        field="indexCode"
        label="检验指标"
        required
        label-col-flex="130px"
      >
        <a-select
          v-model="formData.indexCode"
          placeholder="请选择检验指标"
          style="width: 100%"
        >
          <a-option value="ZB001">ZB001-白细胞</a-option>
          <a-option value="ZB002">ZB002-红细胞</a-option>
          <a-option value="ZB003">ZB003-血小板</a-option>
          <a-option value="ZB004">ZB004-血红蛋白</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        field="lowerLimit"
        label="最小值下限预警"
        label-col-flex="130px"
      >
        <a-input
          v-model="formData.lowerLimit"
          placeholder="请输入最小值下限预警"
        />
      </a-form-item>

      <a-form-item
        field="upperLimit"
        label="最大值上限预警"
        label-col-flex="130px"
      >
        <a-input
          v-model="formData.upperLimit"
          placeholder="请输入最大值上限预警"
        />
      </a-form-item>
      <a-form-item>
        <a-space class="">
          <a-button @click="handleCancel">取 消</a-button>
          <a-button type="primary" html-type="submit">确 定</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import type { FormInstance } from '@arco-design/web-vue';

  // 接收父组件传递的参数
  const { initialData, openAddEdit } = defineProps({
    // 可以通过props传递初始数据
    initialData: {
      type: Object,
      default: () => ({}),
    },
    openAddEdit: {
      type: Boolean,
      default: false,
    },
  });
  // 表单实例
  const formRef = ref<FormInstance | null>(null);
  // 弹窗标题
  const title = ref('新增');

  // 表单数据
  const formData = ref({ ...initialData });

  // 表单验证规则
  const rules = {
    itemCode: [
      { required: true, message: '请选择检验项目', trigger: 'change' },
    ],
    indexCode: [
      { required: true, message: '请选择检验指标', trigger: 'change' },
    ],
    lowerLimit: [
      { required: true, message: '请输入最小值下限预警', trigger: 'change' },
    ],
    upperLimit: [
      { required: true, message: '请输入最大值上限预警', trigger: 'change' },
    ],
  };

  // 定义事件
  const emit = defineEmits(['click']);

  watch(
    () => openAddEdit,
    (newVal) => {
      if (!newVal) {
        formData.value = {};
        return;
      }
      formData.value = { ...initialData };
      title.value = initialData?.id ? '编辑' : '新增';
    },
    { deep: true }
  );

  // 关闭弹窗
  const handleCancel = () => {
    emit('click', { type: 'close', data: false });
  };

  // 确定按钮点击事件

  const handleAddSubmit = () => {
    formRef.value?.validate().then((res: any) => {
      if (!res) {
        emit('click', { type: 'save', data: formData.value });
      }
    });
  };
</script>

<style lang="less" scoped>
  :deep(.arco-form-item-content-flex) {
    justify-content: flex-end;
  }
</style>
